<template>
	<view class="view-body">
		<view class="view-image">
			<template>
				<u--image :showLoading="true" src="../../static/1.jpg" width="420px" height="165px"></u--image>
			</template>
		</view>
		<view class="view-message">
			<u--text text="填写报名信息" size="20px" blod margin="40rpx 0rpx 0rpx 40rpx"></u--text>
			<view class="u-demo-block">
				<view class="view-form">
					<u--form labelPosition="left" ref='myForm' :model="data">
						<u-form-item prop="phone">
							<u-input placeholder="请输入" v-model="data.phone" border="bottom">
								<u--text text="手机号" slot="prefix" margin="0 11px 0 5px" color="#303133" blod></u--text>
							</u-input>
						</u-form-item>
					</u--form>
				</view>
				<view class="view-form">
					<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
					<!-- #ifndef APP-NVUE -->
					<u-input placeholder="请输入" v-model="data.phoneCode" border="bottom">
						<u--text text="验证码" slot="prefix" margin="0 11px 0 5px" blod></u--text>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input placeholder="后置插槽">
							<!-- #endif -->
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
								<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
							</template>
							<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</view>
				<view class="view-form">
					<u-cell @click="showPicker" :title="title" isLink :value="provices.name">
					</u-cell>
					<view>
						<u-picker :show="cityShow" :columns="columnsCity" @cancel="cancel" @confirm="confirm"
							keyName="name">
						</u-picker>
					</view>
				</view>
				<view class="view-form">
					<u-cell @click="showArea" :title="areaTitle" isLink :value="cityAreaName">
					</u-cell>
					<view>
						<u-picker :show="areaShow" ref="uPicker" :columns="columnsArea" @confirm="cityConfirm"
							@change="changeHandler" @cancel="areaCancel" keyName="name"></u-picker>
					</view>
				</view>
			</view>
		</view>
		<view class="view-message1">
			<u--text text="为什么选择成为吃了么骑手?" size="24px" blod margin="40rpx 0rpx 0rpx 40rpx"></u--text>
			<u--text text="2020年有超470万骑手在吃了么平台上获得收入" size="14px" margin="20rpx 0rpx 0rpx 40rpx" color="#828282">
			</u--text>
			<ul style="list-style:none;margin-left: -30px;margin-top: 20px;">
				<li style="float: left">
					<view class="box-a">
						<u--text text="体验好" size="20px" blod margin="30rpx 0rpx 0rpx 50rpx" color="#D3894A"></u--text>
						<u--text text="系统推单" size="20px" blod margin="40rpx 0rpx 0rpx 30rpx" color="#7E776D"></u--text>
						<u--text text="单量稳定" size="20px" blod margin="10rpx 0rpx 0rpx 30rpx" color="#7E776D"></u--text>
					</view>
				</li>
				<li style="float: left;margin-left: 10px;">
					<view class="box-b">
						<u--text text="收入高" size="20px" blod margin="30rpx 0rpx 0rpx 50rpx" color="#D3894A"></u--text>
						<u--text text="奖励丰富" size="20px" blod margin="40rpx 0rpx 0rpx 30rpx" color="#7E776D"></u--text>
						<u--text text="多劳多得" size="20px" blod margin="10rpx 0rpx 0rpx 30rpx" color="#7E776D"></u--text>
					</view>
				</li>
				<li style="float: left;margin-left: 10px;">
					<view class="box-c">
						<u--text text="更自由" size="20px" blod margin="30rpx 0rpx 0rpx 50rpx" color="#D3894A"></u--text>
						<u--text text="就近分配" size="20px" blod margin="40rpx 0rpx 0rpx 30rpx" color="#7E776D"></u--text>
						<u--text text="时间自由" size="20px" blod margin="10rpx 0rpx 0rpx 30rpx" color="#7E776D"></u--text>
					</view>
				</li>
			</ul>
		</view>
		<view style="width: 700px;">
			<view class="u-page__button-item">
				<u-button text="报名加入" size="normal" type="primary" @click="nextStart"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			// 验证手机号的规则
			var cheackMobile = (rule, value, cb) => {
				// 手机号一般最小以“13”开头
				const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (regMobile.test(value)) {
					return cb()
				}
				cb(new Error('请输入合法的手机号!'))
			}
			return {
				provices: {
					id: '',//id
					name: '',//省名称
					pid: '',//父id
					level: ''//层级 0 1 2 省市区县
				},
				checked: '', //复选框
				data: {
					phone: '', //手机号
					phoneCode: '', //验证码
					proviceId: '', //省ID
					provice: '', //省名称
					cityName: '', //市名称
					cityId: '', //市ID
					areaName: '', //县名称
					areaId: '' ,//县ID
					codeMark:'rider'//标志
				},
				tips: '', //input框验证码倒计时
				columnsCity: [

				], //所有省
				cityShow: false, //Picker 选择器是否显示
				title: '意向工作城市',
				areaTitle: '意向工作地点',
				name: '', //省名称
				cityAreaName: '', //市县名称
				areaShow: false,//Picker 选择器是否显示
				columnsArea: [

				],//市数据
				columnData: [

				],//县数据
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: cheackMobile,
							trigger: 'blur'
						}
					]
				}
			}
		},
		onLoad() {
			this.getAllProvinces()
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.myForm.setRules(this.rules)
		},
		methods: {
			//报名骑手
			nextStart(){
				console.log(this.data)
				this.$myRequest({
					url:'/rider/registeredRider',
					method:'post',
					data:JSON.stringify(this.data)
				}).then(res=>{
					if(res.data.code == 200){
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}else{
						console.log("验证码输入错误")
					}
				})
			},
			//查询所有省
			getAllProvinces() {
				this.$myRequest({
					url: '/area/getAllProvinces',
					method: 'get'
				}).then(res => {
					this.columnsCity.push(res.data.obj)
					console.log(this.columnsCity)
				})
			},
			//根据省ID查询所有市以及第一个市下的所有县
			getAllCityArea() {
				this.$myRequest({
					url: '/area/getAllCityArea',
					method: 'post',
					data: JSON.stringify(this.provices)
				}).then(res => {
					this.columnsArea.push(res.data.obj.cityEntities)
					this.columnsArea.push(res.data.obj.areaEntities)
				})
			},
			//根据市ID查询所有县
			getAllArea() {
				this.$myRequest({
					url: '/area/getAllArea',
					method: 'get',
					data: {
						'id': this.provices.id
					}
				}).then(res => {
					this.columnData = res.data.obj
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			//发送验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$myRequest({
						url:'/shortMessage/SendVerificationByPhone',
						method:'get',
						data:{
							'phone':this.data.phone,
							'codeMark':'rider'
						}
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			//开启城市选择器
			showPicker() {
				this.cityShow = true
			},
			//开启市县选择器根据省ID查询所有市
			showArea() {
				this.areaShow = true
				this.getAllCityArea()
				this.getAllArea()
			},
			//选择后关闭城市选择器
			confirm(e) {
				this.provices.name = e.value[0].name
				this.provices.pid = e.value[0].pid
				this.provices.level = e.value[0].level
				this.provices.id = e.value[0].id
				this.data.provice = e.value[0].name
				this.data.proviceId = e.value[0].id
				this.data.id = e.value[0].id
				this.columnsArea = []
				this.columnData = []
				this.cityShow = false
			},
			//关闭城市选择器
			cancel() {
				this.cityShow = false
			},
			//关闭市县选择器
			areaCancel() {
				this.areaShow = false
			},
			//当选择器数据发生改变时触发
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			cityConfirm(e) {
				this.data.cityName = e.value[0].name
				this.data.cityId = e.value[0].id
				this.data.areaName = e.value[1].name
				this.data.areaId = e.value[1].id
				this.cityAreaName = e.value[0].name + e.value[1].name
				this.areaShow = false
			}
		}
	}
</script>

<style>
	.view-image {
		width: 100%;
		height: 300rpx;
		background: lightblue;
	}

	.view-message {
		overflow: hidden;
		width: 700rpx;
		margin: 0 auto;
		border-radius: 5px;
		background: white;
		height: 460rpx;
		margin-top: 30px;
	}

	.view-message1 {
		overflow: hidden;
		width: 700rpx;
		margin: 0 auto;
		border-radius: 5px;
		background: white;
		height: 460rpx;
		margin-top: 20px;
	}

	.u-page__button-item {
		width: 710rpx;
		margin-left: 20rpx;
		margin-top: 30rpx;
	}

	.view-body {
		height: 896px;
		background: #EAF6F6;
	}

	.view-form {
		margin-top: 0px;
		width: 90%;
		margin-left: 20px
	}
	.box-a {
		width: 210rpx;
		height: 250rpx;
		background: #FFF9EB;
		/* margin-left: 15rpx;
		margin-top: 30rpx; */
		overflow: hidden;
	}

	.box-b {
		width: 210rpx;
		height: 250rpx;
		background: #FFF9EB;
		/* margin-left: 245rpx;
		margin-top: -134px; */
		overflow: hidden;
	}

	.box-c {
		width: 210rpx;
		height: 250rpx;
		background: #FFF9EB;
		/* margin-left: 470rpx;
		margin-top: -134px; */
		overflow: hidden;
	}

	.checkbox-qishou {
		width: 389px;
		margin-top: 10px;
		margin-left: 13px;
	}
</style>
